<template>
  <div class="user-manager-container">
    <h2 class="section-title">用户管理</h2>
    
    <div class="user-table-container">
      <el-table
        :data="users"
        style="width: 100%"
        :header-cell-style="{ background: '#2a3444', color: '#ffffff', textAlign: 'center' }"
        :cell-style="getCellStyle"
      >
        <el-table-column prop="mid" label="用户ID" width="80" align="center" />
        <el-table-column prop="mname" label="用户名" width="100" align="center" />
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template #default="scope">
            <el-tag
              :type="scope.row.isBanned ? 'danger' : 'success'"
              size="small"
            >
              {{ scope.row.isBanned ? '已封禁' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="abNum" label="异常次数" width="80" align="center">
          <template #default="scope">
            <span :class="{ 'abnormal-text': scope.row.abNum !== '无' }">
              {{ scope.row.abNum }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="abDate" label="最近异常时间" width="160" align="center">
          <template #default="scope">
            <span :class="{ 'abnormal-text': scope.row.abDate !== '无' }">
              {{ scope.row.abDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="abReason" label="异常原因" align="center">
          <template #default="scope">
            <span :class="{ 'abnormal-text': scope.row.abReason !== '无' }">
              {{ scope.row.abReason !== '无' ? scope.row.abReason.slice(0, 10) + '...' : scope.row.abReason }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleViewDetails(scope.row)"
              :disabled="scope.row.abNum === '无'"
            >
              查看详情
            </el-button>
            <el-popconfirm
              :title="`确定要${scope.row.isBanned ? '解封' : '封禁'}该用户吗？`"
              @confirm="handleBanUser(scope.row)"
            >
              <template #reference>
                <el-button
                  :type="scope.row.isBanned ? 'success' : 'danger'"
                  size="small"
                  :loading="isSubmitting"
                >
                  {{ scope.row.isBanned ? '解封' : '封禁' }}
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 异常详情对话框 -->
    <el-dialog
      v-model="detailsDialogVisible"
      title="异常详情"
      width="500px"
      :close-on-click-modal="false"
      class="details-dialog"
    >
      <div v-if="selectedUser" class="details-content">
        <div class="detail-item">
          <span class="label">用户ID：</span>
          <span>{{ selectedUser.mid }}</span>
        </div>
        <div class="detail-item">
          <span class="label">用户名：</span>
          <span>{{ selectedUser.mname }}</span>
        </div>
        <div class="detail-item">
          <span class="label">异常次数：</span>
          <span>{{ selectedUser.abNum }}</span>
        </div>
        <div class="detail-item">
          <span class="label">最近异常时间：</span>
          <span>{{ selectedUser.abDate }}</span>
        </div>
        <div class="detail-item">
          <span class="label">异常原因：</span>
          <span>{{ selectedUser.abReason }}</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailsDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { myAxios } from '../../axios/index'

export default {
  name: 'UserManager',
  setup() {
    const users = ref([])
    const detailsDialogVisible = ref(false)
    const selectedUser = ref(null)
    const isSubmitting = ref(false)

    // 获取所有用户信息
    const fetchUsers = async () => {
      const response = await myAxios.get('/userAdmin/findAll')
      console.log(response.data)
      if (response.data.code === 200) {
        users.value = response.data.data.map(user => ({
          ...user,
          isBanned: user.status === 1 // status为1表示被封禁
        }))
      }
    }

    // 处理查看详情
    const handleViewDetails = (user) => {
      selectedUser.value = user
      detailsDialogVisible.value = true
    }

    // 处理封禁/解封用户
    // 处理封禁/解封用户
    // 处理封禁/解封用户
const handleBanUser = async (user) => {
  try {
    isSubmitting.value = true
    const url = user.isBanned ? '/userAdmin/unseal' : '/userAdmin/ban'
    
    // 修改：直接传递 mid 参数，而不是包装在对象中
    const response = await myAxios.post(url, `mid=${user.mid}`, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })

    if (response.data.code === 200) {
      await fetchUsers()
    }
  } finally {
    isSubmitting.value = false
  }
}

    // 获取单元格样式
    const getCellStyle = ({ row }) => {
      const isAbnormal = row.abNum !== '无'
      return {
        background: isAbnormal ? '#2d1f1f' : '#1e2837',
        color: '#ffffff',
        textAlign: 'center'
      }
    }

    onMounted(() => {
      fetchUsers()
    })

    return {
      users,
      detailsDialogVisible,
      selectedUser,
      isSubmitting,
      handleViewDetails,
      handleBanUser,
      getCellStyle
    }
  }
}
</script>

<style scoped>
.user-manager-container {
  height: calc(100vh - 72px);
  width: 100%;
  background-color: #1e2837;
  color: #ffffff;
}

.section-title {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  color: #409eff;
  font-size: 24px;
  font-weight: 600;
}

.user-table-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background: #2a3444;
  border-radius: 8px;
  box-sizing: border-box;
}

.abnormal-text {
  color: #ff6b6b;
  font-weight: 500;
}

/* 表格相关样式 */
:deep(.el-table) {
  --el-table-border-color: #3a4557;
  --el-table-header-bg-color: #2a3444;
  --el-table-header-text-color: #ffffff;
  --el-table-text-color: #ffffff;
  --el-table-row-hover-bg-color: #3a4557;
  background-color: transparent;
}

:deep(.el-table th.el-table__cell) {
  background-color: #2a3444;
  text-align: center !important;
}

:deep(.el-table .cell) {
  text-align: center !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: #3a4557;
}

:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  border-bottom: 1px solid #3a4557;
}

:deep(.el-table--border .el-table__inner-wrapper::after),
:deep(.el-table--border::after),
:deep(.el-table--border::before) {
  background-color: #3a4557;
}

/* Dialog 样式 */
.details-dialog {
  :deep(.el-dialog__header) {
    background: #2a3444;
    margin: 0;
    padding: 20px;
    border-bottom: 1px solid #3a4557;
  }

  :deep(.el-dialog__body) {
    background: #1e2837;
    padding: 20px;
  }

  :deep(.el-dialog__footer) {
    background: #2a3444;
    border-top: 1px solid #3a4557;
    padding: 20px;
  }

  :deep(.el-dialog__title) {
    color: #ffffff;
  }
}

.details-content {
  .detail-item {
    margin-bottom: 15px;
    
    .label {
      color: #909399;
      margin-right: 10px;
    }
  }
}

/* 按钮样式 */
:deep(.el-button--danger) {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

:deep(.el-button--danger:hover) {
  background-color: #e64242;
  border-color: #e64242;
}

:deep(.el-button--success) {
  background-color: #67c23a;
  border-color: #67c23a;
}

:deep(.el-button--success:hover) {
  background-color: #529b2e;
  border-color: #529b2e;
}

/* Tag 样式 */
:deep(.el-tag) {
  min-width: 60px;
  text-align: center;
}

:deep(.el-tag--danger) {
  background-color: #2d1f1f;
  border-color: #f56c6c;
  color: #f56c6c;
}

:deep(.el-tag--success) {
  background-color: #1f2d1f;
  border-color: #67c23a;
  color: #67c23a;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}
</style>